<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <table>
        <thead>
            <th>老师</th>
            <th>业务</th>
            <th>性别</th>
            <tbody>
                    <tr>
                        <td>玉鼎真人</td>
                        <td>十二金仙</td>
                        <td>男</td>
                    </tr>
                    <tr>
                        <td>二郎真君</td>
                        <td>天眼</td>
                        <td>男</td>
                    </tr>
            </tbody>
        </thead>
    </table>
    <script>
        
        var arr = [
            {
                teacher:"陈艳秋",
                lesson:" H5+C3",
                gender: "女"  
            },
            {
                teacher:"刘志远",
                lesson:" JS基础",
                gender: "男"  
            },
            {
                teacher:"邱海峰",
                lesson:" DOM+JS高级",
                gender: "男"  
            },
            {
                teacher:"任安萍",
                lesson:" Node JS",
                gender: "女"  
            },
            {
                teacher:"王艳",
                lesson:" 辅导",
                gender: "女"  
            },
            {
                teacher:"张岩",
                lesson:" 辅导",
                gender: "男"  
            },
        ]
            var htmlstr = "";
            // 循环一下 获取对象里的值
            arr.forEach(function(item,key){
                    if( key % 2 == 0){
                        htmlstr += `<tr style = "background : skyblue"><td>${item.teacher}</td><td>${item.lesson}</td><td>${item.gender}</td></tr>`;
                    }else{
                        htmlstr += `<tr><td>${item.teacher}</td><td>${item.lesson}</td><td>${item.gender}</td></tr>`;
                    }
            })

            var tbodyEle = document.querySelector('tbody');//直接获取标签时，不用在小括号里写点 否则不能正常获取元素 会报错！
            
            // innerHTML会将标签的样式和标签内部的内容一并解析出现在网页上
            tbodyEle.innerHTML = htmlstr;
            


    </script>

    
</body>
</html>
<table>


